﻿<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="STGL.ascx.cs" Inherits="XYTXL.Web.View.UCMangForm.STGL" %>
<link href="/View/JS/umeditor122/themes/default/css/umeditor.css" type="text/css" rel="stylesheet" />
<script src="/View/JS/umeditor122/umeditor.js" type="text/javascript" charset="utf-8"></script>
<script src="/View/JS/umeditor122/umeditor.config.js" type="text/javascript" charset="utf-8"></script>
<style>
    .rule {
        margin-bottom:10px;
    }
</style>
<div class="row">
    <div class="col-xs-8">
        
        <div class="form-group">
            <label>问卷</label>
            <div class="input-group">
                <asp:TextBox ID="txtName" runat="server" CssClass="form-control validate[required] wj"   onfocus="this.blur()"></asp:TextBox>
                <span class="input-group-btn">
                    <input type="button" name="choose" value="选  择"  class="btn btn-info choose"/>
                </span>
            </div>
        </div>
        <div class="form-group">
            <label>类型</label>
            <asp:DropDownList ID="ddlType" runat="server" CssClass="form-control validate[required] ddlType"  >
                <asp:ListItem Value="单选题">单选题</asp:ListItem>
                <asp:ListItem Value="多选题">多选题</asp:ListItem>
                <asp:ListItem Value="判断题">判断题</asp:ListItem>
                <asp:ListItem Value="论述题">论述题</asp:ListItem>
            </asp:DropDownList>
        </div>
        <div class="form-group">
            <label>题文</label>
            <asp:TextBox ID="txtDetails" runat="server" TextMode="MultiLine" CssClass="form-control  UEEDIT"></asp:TextBox>
        </div>
        <div class="form-group rulediv">
            <div class="row">
               <label class="col-xs-12">选项明细</label>
            </div>
            <%--<div class="row">
                <label class="col-xs-2">名称</label>
                <label class="col-xs-8">内容</label>
                <label class="col-xs-2"><a class="btn btn-default add" onclick="addmxt()">新   增</a></label>
            </div>--%>
            <table class="table table-bordered table-striped table-hover rulediv">
                <thead>
                    <tr>
                        <th style="width:80px">名称</th>
                        <th>内容</th>
                        <th style="width:80px"></th>
                    </tr>
                </thead>
                <tbody class="ruletb">

                </tbody>
                <tfoot class="add">
                    <tr>
                        <td></td>
                        <td><input type="text" name="name"  class="form-control name"  placeholder="此处输入选项内容" /></td>
                        <td style="vertical-align: middle;"><a style="color: dodgerblue; cursor: pointer" onclick="add()">新增</a></td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
    <div  class="col-xs-4">
        <input type="hidden" runat="server" class="json" id="json" />
    </div>
</div>
<script>
    $(function () {
        $(".ddlType").change(function () {
            $(".rule").remove();
            $(".rulediv").show();
            //switch ($(this).val()) {
            //    case '单选题': $(".add").hide(); add1(); break;
            //    case '多选题': $(".add").show(); add2(); break;
            //    case '判断题': $(".add").hide(); add3(); break;
            //    case '论述题': $(".rulediv").hide(); break;
            //}
            switch ($(this).val()) {
                case '单选题': $(".add").show(); $("thead").find("th:last").show(); break;
                case '多选题': $(".add").show(); $("thead").find("th:last").show(); break;
                case '判断题': $(".add").hide(); add3(); break;
                case '论述题': $(".rulediv").hide(); break;
            }
        })
        $(".ddlType").trigger("change");

        $(".choose").click(function () {
            ComFunJS.SelData($(".wj"), "WJGL", $(".wj").val());
        })

        if ($(".json").val() && $(".json").val()!='[]') {
            $(".rule").remove();

            var obj = JSON.parse($(".json").val());
            if ($(".ddlType").val() != '判断题') {
                $(obj).each(function (i, m) {
                    //switch ($(".ddlType").val()) {
                    //    case '单选题': adddxt(m); break;
                    //    case '多选题': addmxt(m); break;
                    //    case '判断题': addpdt(m); break;
                    //}
                    add(m);
                })
            }
            else {
                add3();
            }
        }
    });
    function add(m) {
        
        var i = $(".rule").length;
        if (i < 26) {

            if (!m) {
                if ($(".name").val() ) {
                    m = { 'Type': '', 'Name': '' };
                    m.Type = alphabet(i + 1);
                    m.Name = $(".name").val();
                    $(".name").val('');
                }
                else {
                    parent.MyDialog.warning('请输入选项内容');
                    return;
                }
            }

            var html = '<tr class="rule">'
                 + '    <td><span>' + (m ? m.Type : alphabet(i + 1)) + '</span></td>'
                 + '    <td><span>' + (m ? m.Name : '') + '</span></td>'
                 + '    <td><a style="color: red; cursor: pointer" onclick="del(this)">删除</a></td>'
                 + '</tr>';
            $(html).appendTo($(".ruletb"));
        }
        else {
            top.MyDialog.warning('超过26个选项,不能新增!');
        }
    }
    function adddxt(m) {
        var i = $(".rule").length;
        if (i < 26) {
            var html = '<div class="row rule">'
                         + '     <div class="col-xs-2 ">'
                         + '         <span>' + (m ? m.Type : alphabet(i + 1)) + '</span>'
                         + '     </div>'
                         + '     <div class="col-xs-8 ">'
                         + '         <input type="text" class="form-control validate[required]" value="' + (m ? m.Name : '') + '" />'
                         + '     </div>'
                         + '     <div  class="col-xs-2"></div>'
                         + '</div>';
            $(html).appendTo($(".rulediv"));
        }
        else {
            top.MyDialog.warning('超过26个选项,不能新增!');
        }
    }
    function addmxt(m) {
        var i = $(".rule").length;
        if (i < 26) {
            var html = '<div class="row rule">'
                         + '     <div class="col-xs-2 ">'
                         + '         <span>' + (m ? m.Type : alphabet(i + 1)) + '</span>'
                         + '     </div>'
                         + '     <div class="col-xs-8 ">'
                         + '         <input type="text" class="form-control validate[required]" value="' + (m ? m.Name : '') + '" />'
                         + '     </div>'
                         + '     <div  class="col-xs-2"><a class="btn btn-danger" onclick="del(this)">删除</a></div>'
                         + '</div>';
            $(html).appendTo($(".rulediv"));
        }
        else {
            top.MyDialog.warning('超过26个选项,不能新增!');
        }
    }
    function addpdt(m) {
        var i = $(".rule").length;
        var html = '<div class="row rule">'
                         + '     <div class="col-xs-2 ">'
                         + '         <span>' + (m ? m.Type : alphabet(i + 1)) + '</span>'
                         + '     </div>'
                         + '     <div class="col-xs-8 ">'
                         + '         <span>' + (m ? m.Name : (i == 0 ? '√' : '×')) + '</span>'
                         + '     </div>'
                         + '     <div  class="col-xs-2"></div>'
                         + '</div>';
        $(html).appendTo($(".rulediv"));
    }
    function add1(n) {
        for (var i = 1; i < 5; i++) {
            adddxt();
        }
    }
    function add2(n) {
        for (var i = 1; i < 5; i++) {
            addmxt();
        }
    }
    function add3() {
        //for (var i = 1; i < 3; i++) {
        //    addpdt();
        //}
        $("thead").find("th:last").hide();
        var html = '<tr class="rule">'
                 + '    <td><span>A</span></td>'
                 + '    <td><span>√</span></td>'
                 + '</tr>'
                 + '<tr class="rule">'
                 + '    <td><span>B</span></td>'
                 + '    <td><span>×</span></td>'
                 + '</tr>';
        $(html).appendTo($(".ruletb"));
    }
    function del(obj) {
        $(obj).parent().parent().remove();
        var obj = $(".rulediv").find(".rule");
        $(obj).each(function (i, m) {
            //$(m).find("span").text(alphabet(i+1));
            $(m).find("span").eq(0).text(alphabet(i + 1));
        })
    }
    function alphabet(i) {
        return (i + 9).toString(36).toUpperCase();
    }

    function getdata() {
        var obj = [];
        $(".rule").each(function () {
            var model = { "Type": "", "Name": "" };
            model.Type = $($(this).find("span")[0]).text();
            //var objs = $(this).find("input");
            //model.Name = $(objs).length > 0 ? $($(objs)[0]).val() : $($(this).find("span")[1]).text();
            model.Name = $($(this).find("span")[1]).text();
            obj.push(model);
        })
        $(".json").val(JSON.stringify(obj));
    }
</script>